import { useRequest, useBoolean } from 'ahooks'
import { useState, useEffect } from 'react'
import { Http } from '../../../../Common/Api'
import { Result, message } from 'antd'
import { ICON } from '../../../../Common/Configure/Icon'
import './Scss/FilingCabinet.scss'

import { LargeScreenTablesModal } from '../LargeScreen/LargeScreenModal'
import { AttachmentList, AttachmentDetail } from '../LargeScreen/AttachmentWindow'

export const FilingCabinet001 = ({ title, infoTypeManageUuid }) => {
    const [messageApi, contextHolder] = message.useMessage()
    const { runAsync } = useRequest(Http, { manual: true })

    const [Total, setTotal] = useState(0)
    const [List, setList] = useState([])

    const [ListState, { setTrue: ListStateTrue, setFalse: ListStateFalse }] = useBoolean(false)
    const [ViewState, { setTrue: ViewStateTrue, setFalse: ViewStateFalse }] = useBoolean(false)
    const [AttList, setAttList] = useState()

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [ParameterTitle, setParameterTitle] = useState()
    const [Parameter, setParameter] = useState()

    useEffect(() => {
        runAsync({ url: 'getConstructionInfoManageStat', data: { infoTypeManageUuid, OEventDate: 'desc@1' } }).then(
            res => {
                const { total, list } = res
                setTotal(total)
                setList(list)
            },
        )
    }, [infoTypeManageUuid, runAsync])

    const { run: getConstructionInfoManageDetail } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            console.log(list)
            if (list.length === 0) {
                messageApi.info('没有附件信息!')
            } else if (list.length === 1) {
                const [data] = list
                setAttList(data)
                ViewStateTrue()
            } else {
                setAttList(list)
                ListStateTrue()
            }
        },
    })

    return (
        <div className="FilingCabinet001">
            {contextHolder}
            <div className="TitleSmall">
                <div> {title}</div>
                <div />
            </div>
            {Total === 0 ? (
                <Result title="暂无数据" />
            ) : (
                <div className="Box">
                    <div className="list">
                        {List.map(item => (
                            <div
                                key={item.uuid}
                                onClick={() => {
                                    getConstructionInfoManageDetail({
                                        url: 'getConstructionInfoManageDetail',
                                        data: { InfoManageUuid: item.uuid },
                                    })
                                }}
                            >
                                {ICON['wenjianjia']}
                                <div>
                                    <div>
                                        <span>{item.tableName}</span>
                                    </div>
                                    {/* <div>{item.eventDate}</div> */}
                                </div>
                            </div>
                        ))}
                    </div>
                    <div className="btn">
                        <div
                            onClick={() => {
                                setParameterTitle(title)
                                setParameter({
                                    uuid: infoTypeManageUuid,
                                    type: 'LargeScreeTable',
                                    classification: 'securitySlopeLeft',
                                })
                                setTrue()
                            }}
                        >
                            查看更多
                        </div>
                    </div>
                </div>
            )}
            {ListState && AttList && <AttachmentList data={AttList} className="ItemTitle" Off={ListStateFalse} />}
            {ViewState && AttList && <AttachmentDetail data={AttList} className="ItemTitle" Off={ViewStateFalse} />}
            {TowModal && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title={ParameterTitle}
                    parameter={Parameter}
                />
            )}
        </div>
    )
}

export const FilingCabinet002 = () => {}
